<template>
  <div class="result">
    <div class="header">
      <div class="title">
        <img v-if="registerState" src="../../../assets/images/jdj_result_tit_success.png">
        <img v-if="!registerState" src="../../../assets/images/jdj_result_tit_field.png">
      </div>
    </div>
    <div class="main">
      <div class="main-inner">
        <img src="../../../assets/images/jdj_result_main_hero.png">
      </div>
    </div>
    <div class="footer">
      <div class="button" @click="submit">
        <span>前往APP</span>
      </div>
    </div>
    <div class="texture">
      <i></i>
      <i></i>
      <i></i>
    </div>
  </div>
</template>

<script>
import store from "../../../store.js";
export default {
  computed: {
    registerState: {
      get() {
        return store.state.registerState;
      },
      set() {}
    },
    system: {
      get() {
        return store.state.system;
      },
      set() {}
    },
    appStore: {
      get() {
        return store.state.appStore;
      },
      set() {}
    }
  },
  methods: {
    submit() {
      if (this.system != "ios") {
        window.location.href = this.appStore.android;
      } else {
        window.location.href = this.appStore.ios;
      }
      // alert("后端接口缺失");
    }
  }
};
</script>
<style lang='stylus' scoped>
@import '../../../assets/styles/index.styl'
.result {
  width 100%
  background linear-gradient(to bottom, #f96561, #fd8a70, #ffaa80, #ffc6a7)
  background #fe9070
  min-height 100vh
  max-height 820px
  @media only screen and (min-width: 450px) {
    min-height 800px
    max-height 820px
  }
  overflow hidden
  position relative
  .header {
    position relative
    z-index 1
    .title {
      padding 15px
      padding-top 8%
    }
  }
  .main {
    margin-top -30%
    position relative
    z-index 1
    .main-inner {
      width 100%
      & img {
        display inline-block
      }
    }
  }
  .footer {
    text-align center
    position relative
    z-index 1
    .button {
      z-index 4
      background-image url('../../../assets/images/button.png')
      height 70px
      background-size contain
      background-repeat no-repeat
      background-position center
      display inline-block
      width 80%
      text-align center
      span {
        position relative
        top 25%
        transform translateY(-50%)
        font-size 18px
        font-weight bold
        color #fff
      }
    }
  }
  .texture {
    i {
      position absolute
      z-index 0
      display block
      &:nth-child(1) {
        height 350px
        width 350px
        background #ffaf6e
        border-radius 50%
        opacity 0.3
        top -200px
        left -30px
      }
      &:nth-child(2) {
        height 80%
        width 100%
        left 0
        bottom 0
        background-image url('../../../assets/images/jdj_result_main_bg.png')
        background-size 100% auto
        background-repeat no-repeat
        background-position center bottom
      }
      &:nth-child(3) {
        width 100%
        height 30%
        background linear-gradient(to bottom, rgba(247, 92, 89, 1), rgba(247, 92, 89, 0))
        top 0
        left 0
      }
    }
  }
}
</style>
